CSS Animations & Transitions

CSS Transitions let you smoothly animate property changes over a specified duration. Instead of a value snapping instantly, it gradually interpolates between the old and new values.

.box {
  background: blue;
  transition-property: background;
  transition-duration: 0.5s;
  transition-timing-function: ease;
}
.box:hover {
  background: red;
}

/* Shorthand: */
transition: background 0.5s ease;

Key terminology:

• transition-property — which CSS property to animate (e.g. background, transform, all)
• transition-duration — how long the transition takes (e.g. 0.3s, 500ms)
• transition-timing-function — the acceleration curve (ease, linear, ease-in, ease-out, ease-in-out)
• transition-delay — time to wait before starting (e.g. 0.2s)

Tip: Not all properties can be transitioned. Properties that have discrete values (like display) cannot be smoothly animated. Stick to numeric properties like opacity, transform, color, and width.

Adjust the controls below, then click the box to see the transition in action:

While transitions animate between two states, @keyframes let you define multi-step animation sequences:

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-30px); }
}

.box {
  animation: bounce 1s ease infinite;
}

Pick an animation to see it applied to the box:

Fine-tune your animation with these properties:

You can apply multiple animations to a single element by comma-separating them. Toggle the animations below to see them combined:

1. What is the main difference between a CSS transition and a CSS animation?

2. Which property specifies whether an animation should play in reverse on alternate cycles?

3. How do you apply multiple animations to one element?